<template>
  <div class="book-page">
    <div class="page-content">
      <h1>{{ currentChapter.title }}</h1>
      <p>{{ currentChapter.content }}</p>
    </div>
    <div class="page-buttons">
      <el-button type="primary" @click="turnPage('previous')">上一页</el-button>
      <el-button type="primary" @click="turnPage('next')">下一页</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chapters: [ // 假设有一些章节内容
        {
          title: "第一章",
          content: "这是第一章的内容。"
        },
        {
          title: "第二章",
          content: "这是第二章的内容。"
        },
        // 更多章节...
      ],
      currentChapterIndex: 0
    };
  },
  computed: {
    currentChapter() {
      return this.chapters[this.currentChapterIndex];
    }
  },
  methods: {
    turnPage(direction) {
      if (direction === 'previous') {
        // 切换到上一章节
        if (this.currentChapterIndex > 0) {
          this.currentChapterIndex--;
        }
      } else if (direction === 'next') {
        // 切换到下一章节
        if (this.currentChapterIndex < this.chapters.length - 1) {
          this.currentChapterIndex++;
        }
      }
    }
  }
};
</script>

<style scoped>
.book-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* 在内容和底部按钮之间平均分配剩余空间 */
  height: 90vh;
  position: relative; /* 相对定位，使绝对定位的按钮相对于此元素定位 */
}

.page-content {
  max-width: 80%;
  text-align: center;
}

.page-buttons {
  position: absolute; /* 绝对定位 */
  bottom: 20px; /* 距离底部的距离 */
  left: 50%; /* 居中对齐 */
  transform: translateX(-50%); /* 居中对齐 */
}

.page-buttons el-button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 1rem;
}
</style>
